<%@ page language="java" contentType="text/html; charset=UTF-8"
	trimDirectiveWhitespaces="true" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>	
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<%
	String path = request.getContextPath();
%>

<t:genericpage nav="${nav}">
    
    <jsp:attribute name="cssblock">
        
    </jsp:attribute>
    
    <jsp:attribute name="jsblock">
    
    <c:url var="urlEchats" value="/include/lib/echarts/echarts.js" />
    <script src="${urlEchats}"></script>
    <c:url var="urlEchatsRoot" value="/include/lib/echarts" />
    <script>
        require.config({
            paths: {
                echarts: '${urlEchatsRoot}'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
				    title : {
				        text: '某地区蒸发量和降水量',
				        subtext: '纯属虚构'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['蒸发量','降水量']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'蒸发量',
				            type:'bar',
				            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            }
				        },
				        {
				            name:'降水量',
				            type:'bar',
				            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
				            markPoint : {
				                data : [
				                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
				                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name : '平均值'}
				                ]
				            }
				        }
				    ]
				};
                myChart.setOption(option);
            }
        );
    </script>   
    
    </jsp:attribute>
    
    <jsp:body>
		<div class="row">
			<div class="col-xs-12">
				<div class="box box-success">
		            <div class="box-header with-border">
		              <h3 class="box-title">Different Height</h3>
		            </div>
		            <div class="box-body">
		              <div id="main" style="height:400px;"></div>
		            </div>
		            <!-- /.box-body -->
	             </div>
			</div>
		</div>
    </jsp:body> 
    
      
</t:genericpage>